<template>
  <div class="form-set" v-loading="loading" element-loading-text="加载中...">
    <el-form label-width="10vw">
      <!-- <el-form-item label="地址层级" class="form-item">
        <div>
          <el-radio-group v-model="addressLevel">
            <el-radio :value="1">
              <span class="bg_text">四级地址库</span>
            </el-radio>
            <el-radio :value="2">
              <span class="bg_text">三级地址库</span>
            </el-radio>
          </el-radio-group>
          <div class="tips">系统全局涉及到填写地址区域的位置，显示三级或者四级地址库</div>
        </div>
      </el-form-item> -->
      <!--网站名称-->
      <el-form-item label="系统名称" class="form-item mb30">
        <el-input
          @input="handleWebsiteNameInput"
          style="width: 14vw"
          placeholder="请输入网站名称"
          v-model="websiteName"
        />
      </el-form-item>

      <!--PC端登录页LOGO-->
      <el-form-item label="PC端登录页LOGO" class="form-item mb30" v-if="false">
        <div class="upload-card">
          <div class="pc_login_logo logo_repeat_style">
            <div class="logo_container">
              <el-image class="image" fit="scale-down" :src="pcLoginLogo">
                <template #error>
                  <div class="image-slot">
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="tips">PC端登录页logo图片路径，尺寸220*50px</div>
          </div>
          <div class="btn_group">
            <el-upload :show-file-list="false" :auto-upload="false" :on-change="uploadPCLoginLogo">
              <el-button type="primary" class="upload_btn btn_item">上传</el-button>
            </el-upload>
            <el-button class="preview_btn btn_item">预览</el-button>
            <el-button type="danger" class="delete_btn btn_item" @click="onRemovePcLoginLogo"
              >删除</el-button
            >
          </div>
        </div>
      </el-form-item>

      <!--系统LOGO-->
      <el-form-item label="系统LOGO" class="form-item mb30">
        <div class="upload-card">
          <div class="pc_side_expand_logo logo_repeat_style">
            <div class="logo_container">
              <el-image class="image" fit="scale-down" :src="pcSideExpandLogo">
                <template #error>
                  <div class="image-slot">
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="tips"
              >PC端导航栏展开logo图片路径，有系统名称时尺寸建议是210*67px，无系统名称时尺寸建议是210*92px</div
            >
          </div>
          <div class="btn_group">
            <el-upload
              :show-file-list="false"
              :auto-upload="false"
              :on-change="uploadSideExpandLogo"
              style="height: 28px; display: flex; align-items: center"
            >
              <HPlainButton>上传</HPlainButton>
            </el-upload>
            <HPlainButton @click="handlePreview(pcSideExpandLogo)">预览</HPlainButton>
            <HPlainButton type="error" @click="onRemovePcSideExpandLogo">删除</HPlainButton>
          </div>
        </div>
      </el-form-item>

      <!--系统缩略LOGO-->
      <el-form-item label="系统缩略LOGO" class="form-item mb30">
        <div class="upload-card">
          <div class="pc_side_collapse_logo logo_repeat_style">
            <div class="logo_container">
              <el-image fit="scale-down" class="image" :src="pcSideCollapseLogo">
                <template #error>
                  <div class="image-slot">
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="tips">PC端导航栏折叠logo图片路径，尺寸60*92px</div>
          </div>
          <div class="btn_group">
            <el-upload
              :show-file-list="false"
              :auto-upload="false"
              :on-change="uploadSideCollapseLogo"
              style="height: 28px; display: flex; align-items: center"
            >
              <HPlainButton>上传</HPlainButton>
            </el-upload>
            <HPlainButton @click="handlePreview(pcSideCollapseLogo)">预览</HPlainButton>
            <HPlainButton type="error" @click="onRemovePcSideCollapseLogo">删除</HPlainButton>
          </div>
        </div>
      </el-form-item>

      <!--移动端LOGO-->
      <el-form-item label="移动端LOGO" class="form-item mb30">
        <div class="upload-card">
          <div class="mobile_terminal_logo logo_repeat_style">
            <div class="logo_container">
              <el-image fit="scale-down" class="image" :src="mobileLogo">
                <template #error>
                  <div class="image-slot">
                    <el-icon><icon-picture /></el-icon>
                  </div>
                </template>
              </el-image>
            </div>
            <div class="tips">移动端logo图片路径，尺寸50*50px</div>
          </div>
          <div class="btn_group">
            <el-upload
              :show-file-list="false"
              :auto-upload="false"
              :on-change="uploadMobileLogo"
              style="height: 28px; display: flex; align-items: center"
            >
              <HPlainButton>上传</HPlainButton>
            </el-upload>
            <HPlainButton @click="handlePreview(mobileLogo)">预览</HPlainButton>
            <HPlainButton type="error" @click="onRemoveMobileLogo">删除</HPlainButton>
          </div>
        </div>
      </el-form-item>
    </el-form>

    <div class="footer">
      <HButton is-modal type="primary" @click="saveOverSet">保存</HButton>
    </div>

    <el-dialog v-model="logoPreviewDialog" @close="onLogoPreviewDialogClose">
      <div style="display: flex; justify-content: center">
        <el-image :src="logoPreviewUrl"></el-image>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted, markRaw } from 'vue'
  import type { UploadFile, UploadProps } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { Warning, Picture as IconPicture } from '@element-plus/icons-vue'
  import { getSysSetOverall, logoUpload, saveSysSetOverall } from '@/api/system'
  import { isUpdateLogo } from '@/config/index'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HButton from '@/components/common/button/HButton.vue'

  const addressLevel = ref(2) // 地址层级
  const loading = ref(false)
  const setID = ref() // 全局设置ID

  // 网站名称
  const websiteName = ref('')

  // LOGO预览弹窗状态
  const logoPreviewDialog = ref(false)

  // LOGO预览链接
  const logoPreviewUrl = ref('')

  // LOGO预览弹窗关闭事件
  const onLogoPreviewDialogClose = () => {
    logoPreviewDialog.value = false
    logoPreviewUrl.value = ''
  }

  // PC端登录页LOGO
  const pcLoginLogo = ref()

  // PC端登录页LOGO文件
  const pcLoginLogoFile = ref()

  // 上传PC端登录页logo
  const uploadPCLoginLogo: UploadProps['onChange'] = (uploadFile: UploadFile) => {
    pcLoginLogo.value = window.URL.createObjectURL(uploadFile.raw!)
    pcLoginLogoFile.value = uploadFile.raw
  }

  // 移除PC端登录logo
  const onRemovePcLoginLogo = () => {
    pcLoginLogo.value = ''
    pcLoginLogoFile.value = null
  }

  // PC端登录页LOGO预览按钮点击事件
  const onPcLoginLogoPreview = () => {
    logoPreviewDialog.value = true
    logoPreviewUrl.value = pcLoginLogo.value
  }

  // 菜单栏展开LOGO
  const pcSideExpandLogo = ref()

  // 菜单栏展开LOGO文件
  const pcSideExpandLogoFile = ref()

  // 上传菜单栏展开LOGO
  const uploadSideExpandLogo: UploadProps['onChange'] = (uploadFile: UploadFile) => {
    if (!['image/png', 'image/jpeg'].includes(uploadFile.raw.type)) {
      ElMessage.error('系统logo必须是图片类型!')
      return false
    }
    pcSideExpandLogo.value = window.URL.createObjectURL(uploadFile.raw!)
    pcSideExpandLogoFile.value = uploadFile.raw
  }

  // 移除PC端导航栏展开logo
  const onRemovePcSideExpandLogo = () => {
    pcSideExpandLogo.value = ''
    pcSideExpandLogoFile.value = null
  }

  // 菜单栏折叠LOGO
  const pcSideCollapseLogo = ref()

  // 菜单栏折叠LOGO文件
  const pcSideCollapseLogoFile = ref()

  // 上传菜单栏折叠LOGO
  const uploadSideCollapseLogo: UploadProps['onChange'] = (uploadFile: UploadFile) => {
    if (!['image/png', 'image/jpeg'].includes(uploadFile.raw.type)) {
      ElMessage.error('系统缩略logo必须是图片类型!')
      return false
    }
    pcSideCollapseLogo.value = window.URL.createObjectURL(uploadFile.raw!)
    pcSideCollapseLogoFile.value = uploadFile.raw
  }

  // 移除PC端导航栏折叠logo
  const onRemovePcSideCollapseLogo = () => {
    pcSideCollapseLogo.value = ''
    pcSideExpandLogoFile.value = null
  }

  // 移动端LOGO
  const mobileLogo = ref()

  // 移动端LOGO文件
  const mobileLogoFile = ref()

  // 上传移动端LOGO
  const uploadMobileLogo: UploadProps['onChange'] = (uploadFile: UploadFile) => {
    if (!['image/png', 'image/jpeg'].includes(uploadFile.raw.type)) {
      ElMessage.error('移动端logo必须是图片类型!')
      return false
    }
    mobileLogo.value = window.URL.createObjectURL(uploadFile.raw!)
    mobileLogoFile.value = uploadFile.raw
  }

  // 预览事件
  const handlePreview = (imgUrl: string) => {
    if (imgUrl) {
      logoPreviewDialog.value = true
      logoPreviewUrl.value = imgUrl
    } else {
      ElMessage({
        message: '暂无图片可预览',
        type: 'warning',
      })
    }
  }

  // 移除移动端logo
  const onRemoveMobileLogo = () => {
    mobileLogo.value = ''
    mobileLogoFile.value = null
  }

  // 获取全局设置
  const getSet = async () => {
    loading.value = true
    const res = await getSysSetOverall()
    addressLevel.value = res.data.data.row.addressLevel
    setID.value = res.data.data.row.id
    pcSideExpandLogo.value = res.data.data.row.logo
    pcSideCollapseLogo.value = res.data.data.row.reduceLogo
    mobileLogo.value = res.data.data.row.mobileServiceLogo
    websiteName.value = res.data.data.row.websiteName
    loading.value = false
  }

  // 保存的方法
  const saveMethod = async (data, method) => {
    ElMessageBox({
      type: 'warning',
      icon: markRaw(Warning),
      title: '提示',
      message: '确认保存设置?',
      showCancelButton: true,
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      autofocus: false,
      beforeClose: (action, instance, done) => {
        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.confirmButtonText = '加载中...'
          setTimeout(() => {
            done()
            setTimeout(() => {
              instance.confirmButtonLoading = false
            }, 0)
          }, 1000)
        } else {
          done()
        }
      },
    }).then(() => {
      method(data).then((res) => {
        if (res.data.success == true) {
          ElMessage({
            message: res.data.message,
            type: 'success',
            duration: 2000,
          })
          isUpdateLogo.value = true
          getSet()
        } else {
          if (res.data.isError)
            ElMessage({
              message: res.data.message,
              type: 'warning',
              duration: 2000,
            })
          return
        }
      })
    })
  }

  // 保存全局设置
  const saveOverSet = async () => {
    const data = {
      addressLevel: addressLevel.value,
      id: setID.value,
      networkLogo: '',
      orderLogo: '',
      reduceLogo: pcSideCollapseLogo.value,
      logo: pcSideExpandLogo.value,
      storeLogo: '',
      mobileServiceLogo: mobileLogo.value,
      websiteName: websiteName.value,
    }
    if (pcSideExpandLogo.value && pcSideExpandLogoFile.value) {
      const res = await logoUpload({ file: pcSideExpandLogoFile.value })
      data.logo = res.data.data.row
    }
    if (pcSideCollapseLogo.value && pcSideCollapseLogoFile.value) {
      const res = await logoUpload({ file: pcSideCollapseLogoFile.value })
      data.reduceLogo = res.data.data.row
    }
    if (mobileLogo.value && mobileLogoFile.value) {
      const res = await logoUpload({ file: mobileLogoFile.value })
      data.mobileServiceLogo = res.data.data.row
    }
    saveMethod(data, saveSysSetOverall)
  }

  // 系统名称输入事件
  const handleWebsiteNameInput = () => {
    const name = websiteName.value.trim()
    const _name = name.match(/[\u4e00-\u9fa5A-Za-z0-9]/g)
    websiteName.value = _name.join('').substring(0, 10)
  }

  onMounted(() => {
    getSet()
  })
</script>
<style lang="scss" scoped>
  @import './index.scss';
</style>
